<template>
  <div>
    <div class="achieve">
      <div class="desc">您自{{time}}加入惠权益以来，关于权益交易取得的成就</div>
      <div class="mui-content">
        <div class="mui-control-content mui-active">
          <transition-group name="list">
            <div class="mui-card radius" v-for="(v, k) in achieve" :key="k">
              <div class="mui-card-header mui-card-media">
                <div class="mui-media-body mg-0">
                  <span class="title">{{relation[k].title}}</span>
                </div>
              </div>
              <div class="mui-card-content">
                <div class="mui-card-content-inner flex">
                  <div class="flex-item">
                      <p>{{relation[k].one}}</p>
                      <p class="word-big">{{v.one}}</p>
                  </div>
                  <div class="flex-item">
                      <p>{{relation[k].two}}</p>
                      <p class="word-big">{{v.two}}</p>
                  </div>
                  <div class="flex-item">
                      <p>{{relation[k].three}}</p>
                      <p class="word-big">¥{{v.three}}</p>
                  </div>
                </div>
              </div>
              <div class="mui-card-footer">
                <div class="f-l">
                  <p>{{relation[k].four}}</p>
                  <p class="big-red"><span>￥</span>{{v.four}}</p>
                </div>
              </div>
            </div>
          </transition-group>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'Achieve',
    data () {
      return {
        achieve: [],
        relation: {
          buy: {title: '我的买单', one: '购买数量：', two: '购买信誉：', three: '共消费(元)：', four: '购买节省(元)：'},
          sell: {title: '我的卖单', one: '售出数量：', two: '售出信誉：', three: '共售出(元)：', four: '售出盈利(元)：'}
        },
        time: ''
      }
    },
    methods: {
      getInfo () {
        this.$post('/vue/my/achieve', '').then(data => {
          this.achieve = data.list
          this.time = data.time
        })
      }
    },
    mounted () {
      this.getInfo()
    }
  }
</script>

<style lang="less">
  @c-124: rgb(124, 124, 124);
  @c-169: rgb(169, 169, 169);
  @c-226: rgb(226, 226, 226);
  @c-235: rgb(235, 235, 235);
  @c-red: rgb(255, 129, 98);
  @c-blue: rgb(108, 184, 222);

  .achieve {
    min-height: 100vh;
    background-color: #FFF;
    .desc {
      font-size: 12px;
      line-height: 20px;
      color: @c-169;
      padding: 12px 12px 0;
      text-align: left;
    }
    .mui-content {
      overflow: hidden;
      background-color: #FFF;
      -webkit-overflow-scrolling: touch;
      .mui-control-content {
        position: relative;
        display: block;
        .mui-card {
          font-size: 14px;
          position: relative;
          overflow: hidden;
          margin: 10px;
          border-radius: 2px;
          background-color: #f2f7fa;
          background-clip: padding-box;
          box-shadow: 0 1px 2px rgba(0,0,0,.3);
          text-align: left;
          &.radius {
            border-radius: 10px;
          }
          .mui-card-media {
            vertical-align: bottom;
            color: #fff;
            background-position: center;
            background-size: cover;
          }
          .mui-card-header {
            font-size: 13px;
            border-radius: 2px 2px 0 0;
            display: block;
            padding: 8px 8px 0;
            color: #000;
            .mui-media-body {
              font-size: 0;
              line-height: 24px;
              color: #333;
              width: 100%;
            }
            .my-icon {
              width: 24px;
              height: 24px;
              display: inline-block;
              vertical-align: middle;
              background-repeat: no-repeat;
              background-size: 100% 100%;
            }
            .sub-title {
              color: #7c7c7c;
            }
            .title {
              font-weight: bold;
            }
            span {
              font-size: 13px;
              margin-left: 0;
              display: inline-block;
              vertical-align: middle;
            }
            .cooperation {
              width: 24px;
              height: 24px;
              float: right;
            }
            &::after {
              top: auto;
              bottom: 0;
            }
          }
          .mui-card-footer, .mui-card-header {
            position: relative;
            display: -webkit-box;
            display: -webkit-flex;
            display: flex;
            min-height: 32px;
            -webkit-box-pack: justify;
            -webkit-justify-content: space-between;
            justify-content: space-between;
            -webkit-box-align: center;
            -webkit-align-items: center;
            align-items: center;
          }
          .mui-card-footer:before, .mui-card-header:after {
            position: absolute;
            top: 0;
            right: 0;
            left: 0;
            height: 1px;
            content: '';
            -webkit-transform: scaleY(.5);
            transform: scaleY(.5);
            background-color: #c8c7cc;
          }
          .mui-card-footer {
            padding: 8px;
            font-size: 12px;
            line-height: 24px;
            color: @c-124;
            border-radius: 0 0 2px 2px;
            p {
              margin-bottom: 0;
              &.big-red {
                color: @c-red;
                font-size: 24px;
                line-height: 32px;
                span {
                  font-size: 13px;
                  line-height: 14px;
                }
              }
              &:last-child {
                margin-bottom: 0;
              }
            }
          }
          .mui-card-content {
            font-size: 12px;
            position: relative;
            .flex {
              display: flex;
              align-items: flex-start;
              align-content: flex-start;
              justify-content: space-between;
              .flex-item {
                &.short {
                  flex: 0.5;
                }
                &.long {
                  flex: 1;
                }
              }
            }
            p {
              font-size: 12px;
              line-height: 24px;
              color: @c-124;
              line-height: 20px;
            }
            .word-big {
              font-size: 15px;
              font-weight: bold;
              line-height: 24px;
            }
            .word-no-link {
              font-size: 16px;
              line-height: 20px;
              color: @c-blue;
              text-decoration: none;
            }
            .right-word-black {
              font-size: 0;
              line-height: 20px;
              div {
                display: inline-block;
                vertical-align: middle;
              }
              .big {
                width: 40px;
                margin-right: 8px;
                color: @c-blue;
                font-size: 32px;
                line-height: 40px;
                text-align: right;
              }
              .normal {
                font-size: 12px;
                text-align: left;
                vertical-align: top;
              }
              .small {
                font-size: 12px;
                text-align: left;
              }
              .middle {
                color: @c-blue;
                font-size: 16px;
                text-align: left;
              }
            }
          }
          .mui-card-content-inner {
            overflow: hidden;
            position: relative;
            padding: 8px;
          }
          .complete-image {
            width: 72px;
            height: 72px;
            position: absolute;
            right: 8px;
            bottom: 8px;
          }
        }
        .mui-card-btn {
          font-size: 0;
          text-align: center;
          padding: 12px;
          img {
            width: 24px;
            height: 24px;
            margin-right: 4px;
            display: inline-block;
            vertical-align: middle;
          }
          .card-btn {
            display: inline-block;
            vertical-align: middle;
            color: #a9a9a9;
            font-size: 13px;
            line-height: 24px;
          }
        }
      }
      &.fee-card {
        .mui-control-content .mui-card .complete-image {
          width: 68px;
          height: 68px;
          right: 0;
          bottom: 0;
        }
      }
    }
  }
</style>